<template>
  <div class="container">
    <div
      class="contentBox"
      v-for="(item, index) in img"
      :key="index"
      :style="{
        backgroundImage: 'url(' + item.bgImg + ')',
      }"
    >
      <p class="num">
        {{ showList[index] ? showList[index].number : "" }}
      </p>
      <p class="text">{{ showList[index] ? showList[index].theme : "" }}</p>
      <div
        class="siledBar"
        :style="{
          backgroundImage: 'url(' + item.slideBar + ')',
        }"
      >
        <div
          class="lightBar move-line"
          :style="{
            backgroundImage: 'url(' + item.lightBar + ')',
          }"
        ></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["summaryDate"],
  data() {
    return {
      showList: [],
      img: [
        {
          bgImg: require("@/assets/HomeViewImages/1/main-beijing-18.png"),
          slideBar: require("@/assets/HomeViewImages/1/main-beijing-18-jianbiankuai1.png"),
          lightBar: require("@/assets/HomeViewImages/1/main-beijing-18-jianbiantiao.png"),
        },
        {
          bgImg: require("@/assets/HomeViewImages/2/main-beijing-2330.png"),
          slideBar: require("@/assets/HomeViewImages/2/main-beijing-2330-jianbiankuai1.png"),
          lightBar: require("@/assets/HomeViewImages/2/main-beijing-18-jianbiantiao2.png"),
        },
        {
          bgImg: require("@/assets/HomeViewImages/3/main-beijing-18-2.png"),
          slideBar: require("@/assets/HomeViewImages/3/main-beijing-18-jianbiankuai2.png"),
          lightBar: require("@/assets/HomeViewImages/3/main-beijing-2330-jianbiantiao.png"),
        },
        {
          bgImg: require("@/assets/HomeViewImages/4/main-beijing-2330-2.png"),
          slideBar: require("@/assets/HomeViewImages/4/main-beijing-2330-jianbiankuai2.png"),
          lightBar: require("@/assets/HomeViewImages/4/main-beijing-2330-jianbiantiao2.png"),
        },
      ],
      // itemList: [
      //   {
      //     num: "18",
      //     theme: "今日参加活动人次",
      //   },
      //   {
      //     num: "¥2330.00",
      //     theme: "今日活动收入",
      //   },
      //   {
      //     num: "18",
      //     theme: "今日课程订单数",
      //   },
      //   {
      //     num: "¥2330.00",
      //     theme: "今日课程订单收入",
      //   },
      // ],
    };
  },
  mounted() {},
  watch: {
    summaryDate(newV, oldV) {
      var arr = JSON.parse(JSON.stringify(newV));
      arr.forEach((item, index) => {
        if (index == 1 || index == 3) {
          item.number = "¥" + item.number.toFixed(2);
        }
      });
      // if (this.showList.length == 0) {
      //   arr.forEach((item, index) => {
      //     if (index == 1 || index == 3) {
      //       item.number = "¥" + item.number.toFixed(2);
      //     }
      //     this.showList.push(item);
      //   });
      // } else {
      //   // this.showList.splice(0, 0);
      //   arr.forEach((item, index) => {
      //     if (index == 1 || index == 3) {
      //       item.number = "¥" + item.number.toFixed(2);
      //     }
      //     this.showList.splice(index, 1, item);
      //   });
      // }
      this.showList = arr;
      // console.log(this.showList.length, this.showList[0].number);
    },
  },
  methods: {},
};
</script>

<style lang="less" scoped>
.container {
  height: 100%;
  display: flex;
  // background-color: rgba(255, 255, 255, 0.038);

  .contentBox {
    flex: 1;
    margin-right: 20px;
    background-repeat: no-repeat;
    background-size: 110% 110%;
    background-position: 35% 35%;
    color: #fff;
    font-family: "微软雅黑";
    font-weight: bold;
    box-sizing: border-box;
    padding: 30px 40px;
    position: relative;

    &:last-of-type {
      margin-right: 0;
    }
    .num {
      font-size: 36px;
      margin-bottom: 6px;
    }
    .text {
      font-size: 18px;
    }

    // 亮条动画效果
    @keyframes animate {
      from {
        left: 0px;
      }
      to {
        left: 150px;
      }
    }
    .move-line {
      animation: animate 3.6s ease infinite;
    }
    .siledBar {
      width: 70%;
      height: 4px;
      position: absolute;
      bottom: 30px;
      left: 40px;
      background-repeat: no-repeat;

      .lightBar {
        width: 74px;
        height: 100%;
        background-repeat: no-repeat;
        position: absolute;
        left: 0;
        top: 0;
      }
    }
  }
}
</style>